import { useState } from 'react';
import { useResize } from '../common/hooks/useResize';
import Filter from './components/Filter';
import OrderList from './components/OrderList';
import '../common/styles/index.less';

export default function CommonList({ type, ajaxFn, actions, tableHeader, defaultParams = {} }) {
	const { el: filterEl, width: filterWidth, onResize } = useResize();
	
	const defaultValue = Object.assign({}, { isLimit: true }, defaultParams);
	const [searchForm, setSearchForm] = useState(defaultValue);
	const contentStyle = {
		flex: 1,
		overflow: 'hidden',
		marginLeft: '16px'
	}

	return (
		<div className='zjf-container-nof' style={{ display: 'flex' }}>
			<div ref={filterEl}>
				<Filter
					defaultValue={defaultValue}
					onResize={onResize}
					onChange={(values) => {
						setSearchForm((pre) => ({ ...pre, ...values }));
					}}
				/>
			</div>
			<div style={contentStyle}>
				<OrderList
				  type={type}
					form={searchForm}
					filterSize={filterWidth}
					tableHeader={tableHeader}
					actions={actions}
					ajaxFn={ajaxFn}
				/>
			</div>
		</div>
	);
}
